<template>
    <view class="cu-bar bg-white margin-top-xs">
      <view class="action sub-title">
        <text class="text-xl text-bold">团队信息</text>
        <text class="text-ABC text-custom"></text>
      </view>

      <view class="action" @click="redirectUserStatstics">
        <text class="text-lg text-shadow" style="color: #DAA520"> 扩展</text>
      </view>
    </view>
    <view class="flex text-center  bg-white nav margin-left margin-right">
      <view class="cu-item flex-sub title-split" :class="index==tabIndex?'text-black txt-b-b':'text-gray'" v-for="(item,index) in tabs" :key="index" @tap="tabSelect(index)" :data-id="index">
        {{item.name}}
      </view>
    </view>
    <view class="cu-list menu sm-border " >
      <user-one-list v-if="tabIndex==0" v-for="(item,idx) in allUser" :user="item"></user-one-list>
      <user-one-list v-if="tabIndex==1" v-for="(item,idx) in level1User" :user="item"></user-one-list>
      <user-one-list v-if="tabIndex==2" v-for="(item,idx) in level2User" :user="item"></user-one-list>
      <user-one-list v-if="tabIndex==3" v-for="(item,idx) in level3User" :user="item"></user-one-list>
    </view>
    <view class="cu-list menu-avatar">
      <view class="text-gray text-center" style="padding-top: 10px">~~我是有底线的~~</view>
    </view>
  <view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
    <view class="cu-dialog">
      <view class="cu-bar bg-white">
        <view class="action text-green"></view>
        <view class="action text-blue" @tap="hideModal">取消</view>
      </view>
      <view class="padding-sm">
        <view class="cu-list menu-avatar text-left">
          <view class="cu-item" v-for="(item,index) in allList" :key="index" @tap="checkData(item.id,item.name)">
            <view class="cu-avatar round lg" :style="'background-image:url('+item.url+')'"></view>
            <view class="content">
              <view>{{item.name}}</view>
              <view class="text-gray text-sm">{{item.phone}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref, onMounted, computed, reactive} from 'vue';
import {teams,noParentIdAdmin,saveTeamAddSp} from '../../common/api/user'
import {useStore} from "../../common/store";
import UserOneList from "../../components/UserOneList.vue";
const store = useStore();
const userId = computed(() => store.userId)
const list = reactive([])

const tabIndex = ref(0)
const tabs = reactive([
  {name: '全部', ind: 0},
  {name: '一级区域合伙人', ind: 0},
  {name: '二级区域合伙人', ind: 1},
  {name: '三级区域合伙人', ind: 2}
])
const allUser = ref([]);
const level1User = ref([]);
const level2User = ref([]);
const level3User = ref([]);
const allList = ref([]);
const modalName = ref('');

const tabSelect = (index) => {
  tabIndex.value = index;
}


const checkData = (id,name) => {
  uni.showModal({
    title: '提示',
    content: `确定要选择"${name}"吗？`,
    showCancel: true, // 显示取消按钮
    cancelText: '取消',
    confirmText: '确定',
    success: async (res) => {
      if (res.confirm) {
        let data = {}
        data['parentId'] = store.userId
        data['adminId'] = id
        await saveTeamAddSp(data).then(res => {
          if (res.code == '200') {
            modalName.value = ''
            loadData()
          }
        })
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });
}

const hideModal = ()=> {
  modalName.value = ''
}

const gotoShopInfo = (id) => {
  uni.navigateTo({url: `/pages/shop/shopInfo?id=${id}`})
}

const  redirectUserStatstics = async () => {
  await noParentIdAdmin().then(res => {
    if (res.code == '200') {
      allList.value = res.data
      modalName.value = 'bottomModal'
    }
  })
}

const  loadData = async () => {
  const id = userId.value ||0
  // const id = 1
  await teams(id).then(res => {
    if (res.code == 200) {
      console.log(res.data)
      let data = res.data;
      allUser.value = data.allUser;
      level1User.value = data.level1User;
      level2User.value = data.level2User;
      level3User.value = data.level3User;
    }
  })
}

onMounted(()=>{
  loadData()
})
</script>
<style lang="scss" scoped>
.txt-b-b {
  border-bottom: 1px solid #1C1C1C;
}
.title-split {
  padding: 0 !important;
}
</style>

